// ant 组件样式修改
:deep(.micro-ant-btn-primary:not(.micro-ant-btn-background-ghost)) {
  &:hover,
  &:active,
  &:focus {
    color: #fff !important;
  }
}

.detail-page {
  padding-bottom: 20px;
  background: #f2f2f2;
  min-height: 100%;
  height: auto;
  min-width: 1200px;
  .breadcrumb {
    width: 1200px;
    margin: 0 auto 14px;
  }
  .detail {
    width: 1200px;
    margin: 0 auto;
    padding: 0 60px 24px;
    background: #ffffff;
    border-radius: 5px;
    .detail-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 0;
      background: #ffffff;
      .back {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.4);
        font-size: 16px;
        cursor: pointer;
        img {
          width: 20px;
          height: 20px;
          margin-right: 2px;
        }
        .icon-back-arrow {
          margin-right: 5px;
          color: rgba(0, 0, 0, 0.2);
        }
        &:hover {
          color: var(--themecolor);
          .icon-back-arrow {
            color: var(--themecolor);
          }
        }
      }
      .btns {
        .ml-12 {
          margin-left: 12px;
        }
      }
    }
    .detail-title {
      margin-top: 8px;
      font-size: 28px;
      font-weight: 500;
      color: #333333;
      line-height: 44px;
      text-align: justify;
      word-break: break-all;
    }
    .detail-sub-title {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      padding: 18px 0;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.4);
      line-height: 24px;
      border-top: 1px solid rgba(186, 191, 197, 0.4);
      border-bottom: 1px solid rgba(186, 191, 197, 0.4);

      .ml-16 {
        margin-left: 16px;
      }
      .sub-left {
        display: flex;
        align-items: center;
        .state {
          padding: 0 8px;
          font-size: 12px;
          line-height: 22px;
          border-radius: 2px;
          &.green {
            background: rgba(86, 214, 183, 0.16);
            color: #56d6b7;
          }
          &.red {
            background: rgba(254, 143, 143, 0.16);
            color: #fe8f8f;
          }
          &.gray {
            background: rgba(153, 153, 153, 0.16);
            color: #999999;
          }
        }
      }
    }
    .detail-content {
      margin-top: 40px;
      font-size: 18px;
      text-align: justify;
      word-break: break-all;
      color: rgba(0, 0, 0, 0.7);
      line-height: 30px;
      &.img-list-box {
        display: flex;
        flex-wrap: wrap;
        margin: 16px 0 0 -16px;
        .img-item {
          width: 25%;
          padding: 24px 0 0 16px;
          .item-inner {
            height: 145px;
            background: #f8f8f8;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            .img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .video {
              display: block;
              width: 100%;
              height: 100%;
            }
            .video-mask {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 42px;
                height: 42px;
              }
            }
          }
        }
      }
    }
    :deep(.rich-text-content) {
      // 富文本内容样式丢失样式解决方案
      font-size: 14px;
      text-align: justify;
      // 图片视频自定义样式
      img,
      video {
        width: 50% !important;
        height: auto !important;
        margin: 0 auto;
      }
      video {
        max-height: 343px;
        background-color: #000;
        margin-bottom: 8px;
      }

      * {
        border-width: initial;
        border-style: initial;
        border-color: initial;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: initial;
        font-weight: initial;
        display: block;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
      }
      ul li {
        list-style: disc inside !important;
        margin: 12px 0 !important;
      }
      ol li {
        list-style: decimal inside !important;
        margin: 12px 0 !important;
      }
      p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
      }
      h1 {
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
      }
      h2 {
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
      }
      h3 {
        font-size: 1.17em;
        margin-block-start: 1em;
        margin-block-end: 1em;
      }
      h4 {
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
      }
      h5 {
        font-size: 0.83em;
        margin-block-start: 1.67em;
        margin-block-end: 1.67em;
      }
      h6 {
        font-size: 0.67em;
        margin-block-start: 2.33em;
        margin-block-end: 2.33em;
      }
      table,
      td,
      th {
        text-align: center !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        min-width: 30px;
        padding: 3px 5px;
        line-height: 1.5;
      }
      table {
        // width: 100% !important;
        margin-bottom: 16px !important;
      }
      th {
        background-color: #f5f2f0 !important;
      }
      hr {
        height: 1;
        margin: 16px 0 !important;
      }
      blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
      }
      code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
      }
      pre code {
        display: block;
      }
      pre {
        border: 1px solid #ccc;
        background-color: #f8f8f8;
        padding: 10px;
        margin: 5px 0px;
        font-size: 0.8em;
        border-radius: 3px;
      }
    }
    .module {
      margin-top: 24px;
      padding: 24px 32px 32px;
      background: #f5f6f7;
      border-radius: 4px;
      .module-title {
        font-size: 18px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.8);
        line-height: 22px;
      }
      .module-content {
        padding-top: 15px;
        // 附件
        &.annex {
          .annex-item {
            padding: 4px 10px;
            margin-top: 16px;
            background: #ffffff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            &:first-child {
              margin-top: 0;
            }
            .annex-name {
              flex: 1;
              display: flex;
              align-items: center;
              padding-right: 10px;
              color: #666;
              word-break: break-all;
              .file-type-icon {
                margin-right: 10px;
                width: 32px;
                height: 32px;
                background-size: 100%;
                &.icon_files_word {
                  background-image: url(../../assets/images/file-type-icon/icon_word.png);
                }
                &.icon_files_img {
                  background-image: url(../../assets/images/file-type-icon/icon_img.png);
                }
                &.icon_files_pdf {
                  background-image: url(../../assets/images/file-type-icon/icon_pdf.png);
                }
                &.icon_files_txt {
                  background-image: url(../../assets/images/file-type-icon/icon_txt.png);
                }
                &.icon_files_mp4 {
                  background-image: url(../../assets/images/file-type-icon/icon_mp4.png);
                }
                &.icon_files_ppt {
                  background-image: url(../../assets/images/file-type-icon/icon_ppt.png);
                }
                &.icon_files_test {
                  background-image: url(../../assets/images/file-type-icon/icon_test.png);
                }
                &.icon_files_others {
                  background-image: url(../../assets/images/file-type-icon/icon_tongyong.png);
                }
                &.icon_files_xlsx {
                  background-image: url(../../assets/images/file-type-icon/icon_xlsx.png);
                }
              }
              .ifont {
                font-size: 32px;
                margin-right: 10px;
              }
              .ifont-wid-appendix_icon_word {
                color: #4a8dff;
              }
              .ifont-wid-popup_icon_pdf {
                color: #fe8f8f;
              }
              .ifont-wid-popup_icon_ppt {
                color: #ff7861;
              }
              .ifont-wid-popup_icon_xlsx {
                color: #56d6b7;
              }
              .ifont-wid-popup_icon_tongyong {
                color: #e4b778;
              }
              .ifont-wid-appendix_icon_mp4 {
                color: #c386f0;
              }
              .ifont-wid-popup_icon_txt1 {
                color: #4a8dff;
              }
              .ifont-wid-a-appendix_icon_png2 {
                color: #6ccbff;
              }
            }
            .download {
              cursor: pointer;
              display: flex;
              align-items: center;
              color: #999;
              &:hover {
                color: var(--themecolor);
              }
            }
          }
        }
        // 封面
        &.cover {
          .cover-img {
            width: 320px;
            height: 180px;
            object-fit: cover;
            border-radius: 4px;
            margin: 0 auto;
            cursor: pointer;
          }
        }
        // 发布位置
        &.location {
          .location-row {
            display: flex;
            margin-left: -4px;
            .location-col {
              width: 33.33%;
              padding: 4px 0 0 4px;
              box-sizing: border-box;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.8);
              &.th {
                font-weight: 500;
                span {
                  background: #ffffff;
                }
              }
              span {
                display: block;
                width: 100%;
                height: 54px;
                padding: 0 20px;
                box-sizing: border-box;
                line-height: 54px;
                text-align: center;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 4px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
        // 操作记录
        &.operate {
          .operate-item {
            padding: 0 32px;
            margin-top: 4px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 4px;
            font-size: 16px;
            color: #171a1d;
            line-height: 54px;
            &:first-child {
              margin-top: 0;
            }
            span {
              margin-right: 16px;
              &:first-child {
                margin-right: 8px;
              }
            }
          }
        }
      }
    }
  }
}
